<template>
	<div class="search">
		<el-tabs v-model="activeName">
			<el-tab-pane label="单曲" name="first">
				<div class="song">
					<el-row class="title">
						<el-col :xs="12" :sm="12" :md="12" :lg="14">
							<span>排名</span>
							<span>歌曲名</span>
						</el-col>
						<el-col :xs="12" :sm="12" :md="12" :lg="10">
							<el-row>
								<el-col :span="8">
									<span>歌手</span>
								</el-col>
								<el-col :span="13">
									<span>专辑</span>
								</el-col>
								<el-col :span="3">
									<span>时间</span>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
					<el-row
						class="song"
						v-for="(item, index) of searchSong"
						:key="index"
					>
						<el-col
							:xs="12"
							:sm="12"
							:md="12"
							:lg="14"
							class="rank-singer"
						>
							<span v-if="index <= 2" class="before">
								{{ index + 1 }}
							</span>
							<span v-else class="after">
								{{ index + 1 }}
							</span>
							<span class="filename">
								<em @click="getPlayMusic(item.hash)">{{
									item.filename.split(" - ")[1]
								}}</em>
								<i @click="targetVideoDetails(item.mvhash)">{{
									item.mvhash ? "&#xe6af;" : ""
								}}</i></span
							>
						</el-col>
						<el-col :xs="12" :sm="12" :md="12" :lg="10">
							<el-row>
								<el-col :span="8">
									<span class="singer">{{
										item.filename.split("-")[0]
									}}</span>
								</el-col>
								<el-col :span="13">
									<span class="remark">
										{{
											item.album_name
												? item.album_name
												: "暂无专辑"
										}}
									</span>
								</el-col>
								<el-col :span="3">
									<span class="time">{{
										item.duration
									}}</span>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
			<el-tab-pane label="视频" name="second">
				<div class="video">
					<el-row class="singer-mv">
						<el-col
							:xs="6"
							:sm="6"
							:md="6"
							:lg="4"
							v-for="item of searchVideo"
							:key="item.hash"
						>
							<div @click="targetVideoDetails(item.hash)">
								<div class="img">
									<img :src="item.imgurl" alt="" />
									<div class="fill-screen">
										<i>&#xe627;</i>
									</div>
								</div>
								<div
									class="title"
									:title="item.filename"
									v-html="item.filename"
								></div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
			<el-tab-pane label="歌单" name="third">
				<div class="song-list">
					<el-row>
						<el-col
							:xs="6"
							:sm="6"
							:md="6"
							:lg="4"
							v-for="item of searchSongList"
							:key="item.specialid"
						>
							<div
								class="item"
								@click="targetSongListDetails(item.specialid)"
							>
								<div class="img">
									<img :src="item.imgurl" />
									<div class="fill-screen">
										<i>&#xe627;</i>
									</div>
								</div>
								<div
									class="intro"
									v-html="item.specialname"
								></div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
			<el-tab-pane label="专辑" name="fourth">
				<div class="song-list">
					<el-row>
						<el-col
							:xs="6"
							:sm="6"
							:md="6"
							:lg="4"
							v-for="item of searchAlbum"
							:key="item.specialid"
						>
							<div
								class="item"
								@click="targetAlbumDetails(item.albumid)"
							>
								<div class="img">
									<img :src="item.imgurl" />
									<div class="fill-screen">
										<i>&#xe627;</i>
									</div>
								</div>
								<div
									class="intro"
									v-html="item.albumname"
								></div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 搜索的关键词
			keywords: this.$route.params.keywords,
			// 默认选中第一个选项卡
			activeName: "first",
			// 音乐列表
			searchSong: [],
			// 歌单列表
			searchSongList: [],
			// 视频列表
			searchVideo: [],
			// 专辑列表
			searchAlbum: [],
		};
	},
	methods: {
		// 搜索的音乐列表
		getSearchSong() {
			this.axios
				.get(
					`/api-search-song/song?format=json&keyword=${this.keywords}&page=1&pagesize=20&showtype=1`
				)
				.then((res) => {
					res.data.data.info.forEach((item) => {
						item.duration = this.moment(
							item.duration * 1000
						).format("mm:ss");
					});
					this.searchSong = res.data.data.info;
				});
		},
		// 搜索的歌单列表
		getSearchSongList() {
			this.axios
				.get(
					`/api-search-songspecial?version=9108&highlight=em&keyword=${this.keywords}&pagesize=20&filter=0&page=1&sver=2&with_res_tag=1`
				)
				.then((res) => {
					const result = res.data
						.replace(/<!--KG_TAG_RES_START-->/, "")
						.replace(/<!--KG_TAG_RES_END-->/, "");
					const results = JSON.parse(result);
					results.data.info.forEach((item) => {
						item.imgurl = item.imgurl.replace(/\/{size}/, "");
					});
					this.searchSongList = results.data.info;
				});
		},
		// 搜索的视频列表
		getSearchVideo() {
			this.axios
				.get(
					`/api-search-video//mv?version=9108&highlight=em&keyword=${this.keywords}&pagesize=20&page=1&sver=2&with_res_tag=1`
				)
				.then((res) => {
					const result = res.data
						.replace(/<!--KG_TAG_RES_START-->/, "")
						.replace(/<!--KG_TAG_RES_END-->/, "");
					const results = JSON.parse(result);
					results.data.info.forEach((item) => {
						item.imgurl = item.imgurl.replace(/\/{size}/, "");
					});
					this.searchVideo = results.data.info;
				});
		},
		// 搜索的专辑列表
		getSearchAlbum() {
			this.axios
				.get(
					`/api-search-video/album?version=9108&iscorrection=1&highlight=em&plat=0&keyword=${this.keywords}&pagesize=20&page=1&sver=2&with_res_tag=1`
				)
				.then((res) => {
					const result = res.data
						.replace(/<!--KG_TAG_RES_START-->/, "")
						.replace(/<!--KG_TAG_RES_END-->/, "");
					const results = JSON.parse(result);
					results.data.info.forEach((item) => {
						item.imgurl = item.imgurl.replace(/\/{size}/, "");
					});
					this.searchAlbum = results.data.info;
				});
		},
		// 点击播放音乐
		getPlayMusic(hash) {
			this.$store.dispatch("updatePlayMusic", {
				hash: hash,
				this: this,
			});
		},
		// 跳转到mv详情页面
		targetVideoDetails(videohash) {
			sessionStorage.setItem("videohash", videohash);
			this.$router.push(`/videoDetails/${videohash}`);
		},
		// 跳转到歌单详情页面
		targetSongListDetails(specialid) {
			sessionStorage.setItem("specialid", specialid);
			this.$router.push(`/songListDetails/${specialid}`);
		},
		// 点击跳转到专辑详情
		targetAlbumDetails(albumid) {
			this.$router.push(`/albumDetails/${albumid}`);
		},
	},
	mounted() {
		this.getSearchSong();
		this.getSearchSongList();
		this.getSearchVideo();
		this.getSearchAlbum();
	},
	watch: {
		$route() {
			this.$router.push(location.reload());
		},
	},
};
</script>
<style lang="scss">
.search {
	.el-tabs__header {
		margin: 0;
		background: #fff;
		.el-tabs__nav-scroll {
			position: fixed;
			width: 100%;
			margin-top: -26px;
			padding-top: 15px;
			background-color: #fff;
			z-index: 88;
			.el-tabs__nav {
				background-color: #fff;
			}
		}
	}
	.el-tab-pane {
		margin-top: 50px;
		&#pane-first {
			margin-top: 40px;
		}
	}
	.song {
		padding-left: 10px;
		.title {
			padding: 0 10px;
			height: 44px;
			margin-top: 20px;
			border-bottom: 1px solid #f5f5f5;
			.el-col {
				height: 100%;
				line-height: 44px;
				span {
					font-size: 13px;
					color: #b0b0b0;
					margin-right: 20px;
					white-space: nowrap;
				}
			}
		}
		.song {
			padding: 0 10px;
			height: 44px;
			.el-col {
				height: 44px;
				line-height: 44px;
				&.rank-singer {
					display: flex;
					align-items: center;
				}
				span {
					margin-right: 20px;
					&.before {
						width: 20px;
						height: 22px;
						line-height: 22px;
						text-align: center;
						font-size: 13px;
						color: #fff;
						background: url(../assets/img/rank-bg.svg) no-repeat 0
							2px;
						background-size: contain;
					}
					&.after {
						width: 20px;
						height: 22px;
						line-height: 22px;
						text-align: center;
						color: #333;
						font-size: 12px;
					}
					&.filename {
						width: 90%;
						height: 44px;
						color: #333;
						font-size: 13px;
						cursor: pointer;
						em {
							display: inline-block;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						&:hover {
							color: #5192fe;
						}
						i {
							position: absolute;
							font-family: "iconfont";
							font-size: 23px;
							color: #5192fe;
							margin-left: 5px;
							cursor: pointer;
							transform: translateY(1px);
						}
					}
					&.singer {
						display: inline-block;
						width: 90%;
						font-size: 13px;
						color: #333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: pointer;
						&:hover {
							color: #5192fe;
						}
					}
					&.remark {
						display: inline-block;
						width: 90%;
						font-size: 13px;
						color: #333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: pointer;
						&:hover {
							color: #5192fe;
						}
					}
					&.time {
						font-size: 12px;
						color: #b0b0b0;
					}
				}
			}
			&:hover {
				background-color: #f9f9f9;
			}
		}
	}
	.video {
		.singer-mv {
			display: flex;
			flex-wrap: wrap;
			.el-col {
				margin-bottom: 20px;
				cursor: pointer;
				.img {
					overflow: hidden;
					position: relative;
					width: 90%;
					border-radius: 10px;
					img {
						width: 100%;
					}
					.fill-screen {
						display: none;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, 0.4);
						i {
							position: absolute;
							top: calc(50% - 20px);
							left: calc(50% - 20px);
							font-size: 40px;
							color: #fff;
							font-family: "iconfont";
							&:hover {
								color: #5192fe;
							}
						}
					}
					&:hover {
						.fill-screen {
							display: block;
						}
					}
				}
				.title {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 90%;
					margin-top: 10px;
					font-size: 14px;
					color: #333;
					&:hover {
						color: #5192fe;
					}
				}
			}
		}
	}
	.song-list {
		.el-row {
			display: flex;
			flex-wrap: wrap;
			.el-col {
				margin-bottom: 20px;
				.item {
					width: 100%;
					height: 100%;
					cursor: pointer;
					.img {
						overflow: hidden;
						position: relative;
						width: 90%;
						border-radius: 10px;
						img {
							width: 100%;
							height: 100%;
						}
						.fill-screen {
							display: none;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0.4);
							i {
								position: absolute;
								top: calc(50% - 25px);
								left: calc(50% - 25px);
								font-family: "iconfont";
								color: #fff;
								font-size: 50px;
								&:hover {
									color: #5192fe;
								}
							}
						}
						&:hover {
							.fill-screen {
								display: block;
							}
						}
					}
					.intro {
						width: 90%;
						line-height: 20px;
						margin-top: 10px;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						text-overflow: -o-ellipsis-lastline;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size: 14px;
						cursor: pointer;
						color: #333;
						&:hover {
							color: #5192fe;
						}
					}
				}
			}
		}
	}
}
</style>
